<template>
    <div>
        <div class="container">
            <div class="row length">
                <div class="col-lg-8">
                    <h2>为了您的空闲时间，是独立的，不会影响您的生活</h2>
                    <div v-for="(key,val) in left" :key="val">
                        <img :src="key.img" alt="" width="100%" height="280">
                        <p>{{key.content}}</p>
                        <div><a class="peice">阅读更多</a></div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <h2>最近的帖子</h2>
                    <div v-for="(key,val) in right" :key="val">
                        <img :src="key.img" alt="" height="275">
                        <h5>{{key.date}}</h5>
                        <p class="txt">{{key.content}}</p>
                    </div>
                </div>
            </div>
            <nav aria-label="Page navigation example" class="container pad">
                <ul class="pagination" @click="getPage($event)">
                    <li class="page-item">
                        <a class="page-link" href="##">上一页</a>
                    </li >
                    <li class="page-item"><a class="page-link" href="##">1</a></li>
                    <li class="page-item"><a class="page-link" href="##">2</a></li>
                    <li class="page-item"><a class="page-link" href="##">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="##">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</template>

<script>
    export default {
        name: "news",
        data(){
            return {
                aaa:[],
                bbb:[],
                left:[],//存放后端接收的数据1
                right:[], //存放后端接收的数据2
                targetPage:0, //默认当前显示
                pageSize:2, //总共几页
            }
        },
        mounted(){
            this.$axios('http://localhost:3000/news').then((data)=>{
            console.log(data);
            this.aaa=JSON.parse(data.data[0].aaa);
            this.left=this.aaa.slice(0,2);
            this.bbb=JSON.parse(data.data[0].bbb);
            this.right=this.bbb.slice(0,2);
            })
        },
        methods:{
            //  分页
            getPage(ev){
                // console.log(ev);       
                if(ev.target.innerHTML!="上一页"&&ev.target.innerHTML!="下一页"){
                    this.targetPage=Number(ev.target.innerHTML)-1;
                    this.left = this.aaa.slice(this.pageSize*this.targetPage,this.pageSize*(this.targetPage+1));
                    this.right = this.bbb.slice(this.pageSize*this.targetPage,this.pageSize*(this.targetPage+1));
                    console.log(this.targetPage);
                }
                if(ev.target.innerHTML=="下一页"){
                    console.log(this.targetPage);
                    if(this.targetPage>=2){
                        this.targetPage=2;
                    }else{
                        this.targetPage+=1;
                        this.left = this.aaa.slice(this.pageSize*this.targetPage,this.pageSize*(this.targetPage+1));
                        this.right = this.bbb.slice(this.pageSize*this.targetPage,this.pageSize*(this.targetPage+1));
                    }
                }
                if(ev.target.innerHTML=="上一页"){
                    console.log(this.targetPage);
                    if(this.targetPage<=0){
                        this.targetPage=0;
                    }else{
                        this.targetPage-=1;
                        this.left = this.aaa.slice(this.pageSize*this.targetPage,this.pageSize*(this.targetPage+1));
                        this.right = this.bbb.slice(this.pageSize*this.targetPage,this.pageSize*(this.targetPage+1));
                    }
                }
            },
        }
    }

</script>

<style scoped lang="less">
    a{text-decoration: none}
    .pad{padding: 0;}
    .peice{background-color: #FF9BC1;padding: 0.5rem 2rem;color: #fff;margin-bottom:1.2rem;
        display: inline-block;}
    .length{margin-top: 4rem;}
    h5{margin: 1rem 0;color: #F98FB7}
    h2{margin: 0 0 1em;
        font-size: 25px;
        font-weight: 300;
        text-transform: capitalize;
            color:#ef8ab0;;}
    .txt{line-height: 1.7rem}
    p{font-size: 0.8rem;line-height: 1.8rem;margin:1rem 0 1.5rem;}
    .pagination{margin: 1rem 0 2.5rem 0;}
</style>